<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = "{$date} 河南省批发市场单品价格比对";
$this->params['breadcrumbs'][] = $this->title;

$markets = [];
$prices = [];
foreach ($danpin as $dp) {
    $markets[] = $dp->market;
    $prices[] = $dp->price_jin;
}
//var_dump($prices);die;
?>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 ECharts 文件 -->
    <script src="/dist_price/js/echarts.js"></script>
</head>
<div class="price-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <form id="myform" action="one" method="get">
        <select name="name" onchange="select_change()" style="width: 10rem">
            <?php foreach ($names as $name) {
                if ($name['name'] == $_GET['name']) { ?>
                <option selected="selected" value =<?=$name['name']?>><?=$name['name']?></option>
                <?php } else { ?>
                <option value =<?=$name['name']?>><?=$name['name']?></option>
            <?  }} ?>
        </select>
    </form>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="charts" style="width: 100%;height:80%;"></div>

</div>

<script type="text/javascript">

    function select_change() {
        var form = document.getElementById('myform');
        form.submit();
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('charts'));

    // 指定图表的配置项和数据
    var option = {
            title: {
                text: '<?= $_GET['name'].'单品价格'?>',
                subtext: '数据来自蚁卡营大数据中心',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['价格(单位:元)']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: <?= json_encode($markets) ?>,
            },
            series: [
                {
                    name: '价格(单位:元)',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: <?= json_encode($prices) ?>
                },
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);
    window.onresize = myChart.resize;
</script>